import NavBar from '@/components/NavBar'
import { useNavigate, useParams } from 'react-router-dom'
import styles from './index.module.scss'
import { MoreOutline } from 'antd-mobile-icons'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getArticleInfo } from '@/store/actions/article'
import DOMPurify from 'dompurify'
const Article = () => {
    const navigator = useNavigate()
    const dispatch = useDispatch()

    // useParams 返回URL参数的键值对的对象，使用它来访问当前Route的params
    const Params = useParams()
    // 获取动态路由参数
    const articleId = Params.id
    useEffect(() => {
        dispatch(getArticleInfo(articleId))
    }, [dispatch, articleId])

    // 读取数据
    const info = useSelector((state) => {
        return state.article.info
    })

    const {
        title,
        like_count,
        content,
        aut_photo,
        aut_name,
        pubdate,
        read_count,
        comm_count,
    } = info
    return (
        <div className={styles.root}>
            <div className="root-wrapper">
                {/* 顶部导航栏 */}
                <NavBar
                    onLeftClick={() => navigator(-1)}
                    extra={
                        <span>
                            <MoreOutline />
                        </span>
                    }
                ></NavBar>

                <>
                    <div className="wrapper">
                        <div className="article-wrapper">
                            {/* 文章描述信息栏 */}
                            <div className="header">
                                <h1 className="title">{title}</h1>

                                <div className="info">
                                    <span>{'2020-10-10'}</span>
                                    <span>{read_count} 阅读</span>
                                    <span>{comm_count} 评论</span>
                                </div>

                                <div className="author">
                                    <img src={''} alt="" />
                                    <span className="name">{aut_name}</span>
                                    <span className="follow">关注</span>
                                </div>
                            </div>

                            {/* 文章正文内容区域 */}
                            <div className="content">
                                <div className="content-html dg-html" dangerouslySetInnerHTML={{
                                    __html: DOMPurify.sanitize(info.content || ''),
                                }}></div>
                                <div className="date">发布文章时间：{pubdate}</div>
                            </div>
                        </div>
                    </div>
                </>
            </div>
        </div>
    )
}

export default Article

